<template>
  <div class="">
    <div class="container step-block">
      <span>Step3: 校准结果 </span>
      <span
        >距离本次校准周期结束还剩：<span
          style="font-weight: 700; font-size: 18px; color: coral"
          >{{ restTime }}</span
        ></span
      >
    </div>
    <div class="step-content container">
      <el-table
        :height="tableHeight"
        :data="tableData"
        border
        v-loading="loading"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{ indexMethod(scope.$index, query.page, query.pageSize) }}
          </template>
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.prop === 'deviceStatus'"
          >
            <template v-slot="scope">
              {{ ["在线", "离线"][scope.row[item.prop]] }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </template>
      </el-table>
      <div style="display: flex; justify-content: space-between">
        <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="query.total"
        >
        </el-pagination>
        <div style="text-align: right">
          <el-button
            :disabled="!canNext"
            type="primary"
            style="width: 240px; margin-top: 20px"
            size="large"
            @click="$emit('change', 3)"
            >下一步</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment"
import { indexMethod } from "@/utils/tools"
import { getDeviceCalibrationResult } from "@/api"
import { useTool } from "./useTool"
useTableHight()
const { calibrationBatch, endTime } = useTool()

const emits = defineEmits(["change"])

const restTime = ref("")
const timer = ref<number>()

const canNext = ref(false)

function showTime(time) {
  let start = moment(new Date()) //获取开始时间
  let end = moment(new Date(time)) //结束时间
  let diff = end.diff(start) //时间差
  let timeDiff = Math.round(diff / 1000)
  if (timeDiff <= 0) {
    console.log("时间到了")
    canNext.value = true
    clearInterval(timer.value)
    restTime.value = "0天0小时0分0秒"
    return
  }
  //获取还剩多少天
  let day = parseInt(timeDiff / 3600 / 24)
  //获取还剩多少小时
  let hour = parseInt((timeDiff / 3600) % 24)
  //获取还剩多少分钟
  let minute = parseInt((timeDiff / 60) % 60)
  //获取还剩多少秒
  let second = timeDiff % 60
  //输出还剩多少时间
  restTime.value =
    day +
    "天" +
    timerFilter(hour) +
    "小时" +
    timerFilter(minute) +
    "分" +
    timerFilter(second) +
    "秒"
  //给小于10的数值前面加 0
  function timerFilter(params: any) {
    if (params - 0 < 10) {
      return "0" + params
    } else {
      return params
    }
  }
}
let now = endTime.value
timer.value = setInterval(() => {
  showTime(now)
}, 1000)

const query = reactive({
  time: "",
  startTime: "",
  endTime: "",
  total: 0,
  page: 1,
  pageSize: 10
})

const tableData = ref([])
const columns = ref([
  { prop: "calibrationBatch", label: "校准批次" },
  { prop: "deviceNo", label: "设备编号" },
  { prop: "calibrationStartTime", label: "校准开始时间" },
  { prop: "calibrationEndTime", label: "校准结束时间" },
  { prop: "phaseSequence", label: "相序" },
  { prop: "deviceMeteredElectricity", label: "设备计量电量" },
  { prop: "baseAmmeteMeteredElectricity", label: "基数电表计量电量" },
  { prop: "calibrationFactor", label: "校准系数" }
])

const loading = ref(true)
const getData = async () => {
  loading.value = true
  const res = await getDeviceCalibrationResult({
    pageNumber: query.page,
    pageSize: query.pageSize,
    calibrationBatch: calibrationBatch.value
  })
  loading.value = false
  query.total = res?.length
  tableData.value = res
}

onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped></style>
